/**
 * 组件渲染性能优化：
 * 1. 轻量state （只定义跟界面渲染相关的数据）
 * 2. 借助更新阶段钩子函数：shouldComponentUpdate(nextProps, nextState)
 */


import React, { Component, PureComponent } from 'react';

const ui = (
  <div>
    <h3>虚拟DOM</h3>
  </div>
)
console.log('虚拟DOM：', ui)
// 子组件
const Fnc = (props) => {
  console.log('Fnc组件更新了！', props)
  return (
    <div>
      <h2>函数子组件</h2>
    </div>
  )
}
// 父组件
class App extends PureComponent {

  state = {
    count: 0,
    list: [{ id: 0, name: '小红' }]
  }

  add = () => {
    // setState()异步的方法
    this.setState({
      count: this.state.count + 1
    })
  }

  /**
   * 
   * @param {*} nextProps 最新的props
   * @param {*} nextState 最新的state
   */
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log(nextProps, nextState, this.state.count)
  //   if (nextState.count !== this.state.count) {
  //     return true
  //   }
  //   return false
  // }

  // 点击加一条数据
  addList = () => {
    // 比较引用地址（指针）
    // this.state.list.push({ id: 1, name: '小刚' })
    this.setState({
      list: [...this.state.list, { id: 1, name: '小刚' }]
    })
  }


  render() {
    console.log('app组件更新了！')
    // 更新DOM的时候，怎么更新？
    return (
      <div>
        <h1>组件渲染性能优化</h1>
        <hr />
        <Fnc key={123} />
        <p>{this.state.count}</p>
        <button onClick={this.add}>add</button>
        <ul>
          {
            this.state.list.map((item) => <li key={item.id}>{item.name}</li>)
          }
        </ul>
        <button onClick={this.addList}>添加列表数据</button>
      </div>
    );
  }
}

export default App;